import { useBreakpoint } from 'antd'; // 引入useBreakpoint来检测屏幕尺寸

const ConversationsManger = ({ onAddConversation, onConversationClick, conversationsItems, activeKey, setConversationsItems }) => {
  const {styles} = useStyle();
  const { xs, sm, md, lg, xl } = useBreakpoint(); // 获取屏幕尺寸信息

  return (
    <div className={styles.menu}>
      {/* 🌟 Logo */}
      <LogoNode />
      {/* 🌟 添加会话 */}
      <Button
        onClick={onAddConversation}
        type="link"
        className={styles.addBtn}
        icon={<PlusOutlined />}
      >
        新增会话
      </Button>
      <Conversations
        menu={(conversation) => menuConfig(conversation, setConversationsItems, conversationsItems)}
        items={conversationsItems}
        className={styles.conversations}
        onActiveChange={onConversationClick}
        activeKey={activeKey}
        style={{ fontSize: xs ? '12px' : '16px' }} // 根据屏幕尺寸调整字体大小
      />
    </div>
  )
};